<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 600px;
            height: 380px;
            background-color: lightskyblue;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 50%;
            margin-top: -190px;
            left: 50%;
            margin-left: -300px;
            border-radius: 20px;

        }

        #app div {
            height: 50px;
            margin-top: 20px;

        }

        #app #num1, #num2 {
            display: flex;
            align-items: center;
        }

        #app #num1, #num2 p {
            font-family: "楷体";
            font-weight: bolder;
            font-size: 28px;
        }

        #app #num1 input, #num2 input {
            height: 30px;
            width: 190px;
            border-radius: 8px;
            border-bottom-color: blanchedalmond;
            border: none;

            font-size: 25px;
        }

        #app #symbol {
            width: 60%;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        #app #symbol input {
            height: 20px;
            width: 30px;
        }

        #app #symbol p {
            font-size: 30px;
            height: 20px;
            display: flex;
            align-items: center;
        }

        #app #btn button {
            height: 50px;
            width: 160px;
            border-radius: 10px;
            background-color: dodgerblue;
            font-family: "楷体";
            font-size: 28px;
            font-weight: bolder;
        }

        #app #jieguo {
            font-family: "楷体";
            font-weight: bolder;
            height: 30px;
            font-size: 30px;

        }
    </style>
</head>
<body>
<div id="app">
    <div id="num1">
        <p>第一个数字:</p>
        <input type="text" v-model.Number="num1">
    </div>
    <div id="symbol">
        <input type="radio" name="symbol" value="+" v-model="symbol">
        <p>&plus; </p>
        <input type="radio" name="symbol" value="-" v-model="symbol">
        <p>&minus;</p>
        <input type="radio" name="symbol" value="*" v-model="symbol">
        <p>&times;</p>
        <input type="radio" name="symbol" value="/" v-model="symbol">
        <p>&divide;</p>
    </div>
    <div id="num2">
        <p>第二个数字:</p>
        <input type="text" v-model.Number="num2">
    </div>
    <div id="btn">
        <button type="button" @click="calculate()">计算</button>
    </div>
    <div id="jieguo">
        结果为:{{jieguo}}
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            num1: "",
            num2: "",
            symbol: "",
            jieguo: "计算结果"
        },
        methods: {
            calculate: function () {
                if (this.symbol == '+') {
                    this.jieguo = this.num1 + this.num2;
                    return jieguo;
                } else if (this.symbol == '-') {
                    this.jieguo = this.num1 - this.num2;
                    return jieguo;
                } else if (this.symbol == '*') {
                    this.jieguo = this.num1 * this.num2;
                    return jieguo;
                } else if (this.symbol == '/') {
                    this.jieguo = this.num1 / this.num2;
                    return jieguo;
                }
            }
        },
        watch:{
            symbol: function (val,oldVal) {
                if (this.symbol == '+') {
                    this.jieguo = this.num1 + this.num2;
                    return jieguo;
                } else if (this.symbol == '-') {
                    this.jieguo = this.num1 - this.num2;
                    return jieguo;
                } else if (this.symbol == '*') {
                    this.jieguo = this.num1 * this.num2;
                    return jieguo;
                } else if (this.symbol == '/') {
                    this.jieguo = this.num1 / this.num2;
                    return jieguo;
                }
            }
        }
    });
</script>
</body>
</html>